<!-- 个人中心 -->
<template>
	<view class="me">
		<view class="bg" :class="{ noPice: !showPice, hasVip: showVip, all: showPice && showVip }">
			<!-- #ifdef MP-WEIXIN -->
			<view class="header-blank"></view>
			<view class="TopParent" :style="{'top':searchTop +'rpx'}">
				<view class="message" @click.stop="toSystem">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/searchIfo.png"></image>
					<view v-if="unread" class="dot"></view>
				</view>
				<view class="set" v-if="isLogin"><image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon2.png" @click="goPage('set')"></image></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view style="height:100rpx;"></view>
			<view class="TopParent" :style="{'top':100 +'rpx'}">
				<view class="message" @click.stop="toSystem">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/searchIfo.png"></image>
					<view v-if="unread" class="dot"></view>
				</view>
				<view class="set" v-if="isLogin"><image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon2.png" @click="goPage('set')"></image></view>
			</view>
			<!-- #endif -->

			
			<view class="personInfo" v-if="isLogin">
				<view @click="checkImg(userData.headPortrait)">
					<view class="avatar"><avatar :src="userData.headPortrait"></avatar></view>
				</view>
				<view class="center">
					<view class="top">
						<view class="name">{{ userData.nickName }}</view>
					</view>
					<view class="topVip">
						<image v-if="userData.vipEndDay > 0" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon10.png"></image>
					</view>
				</view>
				<view class="arrow" @click="goPage('edit')"><image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon1.png"></image></view>
			</view>
			
			<view class="personInfo" v-if="!isLogin" @click="goLogin">
				<view>
					<view class="avatar"><avatar src="@/start/logo.png"></avatar></view>
				</view>
				<view class="center">
					<view class="top"><view class="name">去登录账号</view></view>
				</view>
			</view>
			<template>
				<!-- vip会员 -->
				<view class="vip" v-if="userData.vipEndDay <= 0 && isshowmoney" @click="goPage('buy')">
					<view class="left">
						<image class="imageLeft" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon16.png"></image>
						<text>|</text>
						<view class="textLeft">尊享超多权益</view>
					</view>
					
					<view class="right">
						<view class="textRight">立即开通</view>
						<image class="imageRight" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon17.png"></image>
					</view>
				</view>

				<!-- 拼单 -->
				<view class="pice" v-if="userData.orderSpell" @click="goSpell">
					您有
					<text class="txt">{{ userData.orderSpell }}个</text>
					拼单正在进行中，可邀请好友获取额外奖励 >>
				</view>
			</template>
			<view class="info_vip">
				<view class="info_vip_block">
					<view class="texts">{{ userData.readKc }}</view>
					<view class="texts">已学课程</view>
				</view>
				<view class="info_vip_block">
					<view class="texts" @click="goPage('course')">{{ userData.readKc }}</view>
					<view class="texts" @click="goPage('course')">我的课程</view>
				</view>
				<view class="info_vip_block">
					<view class="texts" @click="goPage('topic')">{{ userData.readKc }}</view>
					<view class="texts" @click="goPage('topic')">我的话题</view>
				</view>
				<!-- 课程 -->
				<view class="source" :class="{ isShowVip: showVip }">
					<!-- <view class="left" @click="goPage('course')">
					</view>
					<view class="right" @click="goPage('topic')">
					</view> -->
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="item" v-for="(item, index) in lists" :key="index">
				<view class="title">{{ item.title }}</view>
				<view class="box">
					<view v-for="(text, index2) in item.contents" :key="index2" @click="goPage(text.name)">
						<image :src="text.url"></image>
						<view class="son">{{ text.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserInfo, getUserData ,unreadNum} from '@/apis/apis.js';
import avatar from '@/components/avatar.vue';
import { nextTick } from 'vue';
export default {
	components: {
		avatar
	},
	data() {
		return {
			userData: {}, // 用户数据
			unread: 0,
			lists: [
				{
					title: '我的账户',
					contents: [
						{
							name: '会员权益',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon4.png'
						},
						{
							name: '我的订单',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon6.png'
						},
						{
							name: '收益分析',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon8.png'
						},
						{
							name: '创作中心',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon14.png'
						}
					]
				},
				{
					title: '我的内容',
					contents: [
						{
							name: '学习历史',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon3.png'
						},
						{
							name: '我的收藏',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon5.png'
						},
						{
							name: '我的分享',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon11.png'
						},
						{
							name: '',
							url: ''
						}
					]
				},
				{
					title: '合作建议',
					contents: [
						{
							name: '投诉意见',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon9.png'
						},
						{
							name: '商务合作',
							url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon7.png'
						},
						{
							name: '',
							url: ''
						},
						{
							name: '',
							url: ''
						}
					]
				}
			],
			showPice: true, //显示拼单
			showVip: false, //显示vip
			isios: false,
			isshowmoney: false,
			nameArr: [],
			// 是否登录
			isLogin: false,
			barTop: 0,
			barHeight: 0,
			searchTop: 0,
			barBottom:0,
		};
	},
	onShow() {
		const token = uni.getStorageSync('token');
		this.isLogin = token ? true : false;
		if (token) {
			this.init();
		}
	},
	onLoad() {
		function pxToRpx(px) {
		     const screenWidth = wx.getSystemInfoSync().screenWidth
		     return px * 750 / screenWidth
		   }
		// #ifdef MP-WEIXIN
		let res = uni.getMenuButtonBoundingClientRect()
		this.barHeight = res.height
		this.barTop = res.top
		this.barBottom = res.bottom
		this.searchTop = pxToRpx((this.barTop + this.barBottom) / 2 )- 30;
		if(this.searchTop < 20){
			this.searchTop = 100;
		}
		this.c = res.bottom * 2 + 4 + 'rpx'
		// #endif
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				if (res.platform == 'ios') {
					that.isios = true;
				}
			}
		});
		this.lists.forEach((item, index) => {
			this.nameArr.push(item.title);
		});
	},
	methods: {
		goLogin(){
			uni.navigateTo({
				url:'/pages/index/index'
			})
		},
		//跳转系统信息页面
		toSystem() {
			uni.navigateTo({
				url: '/pages/index/systemInfo/systemInfo'
			});
		},
		checkImg(v) {
			if (v) {
				this.$imgPreview(v, 0);
			}
		},	
		async init() {
			const token = uni.getStorageSync('token');
			// 未读消息
			if(token){
				const unread = await unreadNum();
				this.unread = unread.data;
			}
			getUserData().then(res => {
				this.userData = res.data;
				if (this.userData.flag && this.isios) {
					// flag上架状态 true
					this.isshowmoney = false;
					this.lists.forEach((item, index) => {
						if (item.title == '我的账户') {
							this.lists.splice(index, 1);
						}
					});
					// flag正常状态 fasle
				} else {
					this.isshowmoney = true;
					if (this.nameArr.includes('我的账户') != -1) {
						return;
						this.lists.unshift({
							title: '我的账户',
							contents: [
								{
									name: '会员权益',
									url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon4.png'
								},
								{
									name: '我的订单',
									url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon6.png'
								},
								{
									name: '收益分析',
									url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon8.png'
								},
								{
									name: '创作中心',
									url: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/icon14.png'
								}
							]
						});
					}
				}
			});
			// IP归属地
			this.$attribution();
		},
		goSpell() {
			uni.navigateTo({
				url: '/pages/mine/views/vip/buyVip'
			});
		},
		goPage(source) {
			let url;
			if (source == '会员权益') url = '/pages/mine/views/vip/vip';
			if (source == '创作中心') url = '/pages/mine/views/create/auditStatus';
			if (source == '投诉意见') url = '/pages/mine/views/complain/complain';
			if (source == '学习历史') url = '/pages/mine/views/history';
			if (source == '我的收藏') url = '/pages/mine/views/have';
			if (source == '我的分享') url = '/pages/mine/views/share';
			if (source == '商务合作') url = '/pages/mine/views/business';
			if (source == '我的订单') url = '/pages/mine/views/order';
			if (source == '收益分析') url = '/pages/mine/views/yield/yield';
			if (source == 'buy') url = '/pages/mine/views/vip/buyVip';
			if (source == 'set') url = '/pages/mine/views/unLogin/set?hasPassword=' + this.userData.hasPassword;
			if (source == 'edit') url = '/pages/mine/views/edit';
			if (source == 'course') url = '/pages/mine/views/course/course';
			if (source == 'topic') url = '/pages/mine/views/myTopic/myTopic';
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style scoped lang="scss">
.me {
	background-color: #f6f7fc;
	padding-bottom: 60rpx;
	min-height: calc(100vh);
	width: 100%;
	box-sizing: border-box;
	
	.bg {
		padding: 0 40rpx;
		width: 100%;
		height: fit-content;
		padding-top: 96rpx;
		background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/bg.png') no-repeat;
		background-size: cover;
		box-sizing: border-box;

		* {
			background-color: transparent;
		}

		.header-blank {
			width: 100%;
			height: var(--status-bar-height);
			margin-bottom: 12rpx;
		}
		.TopParent {
		  display: flex;
		  position: absolute;
		  // justify-content: space-between;
		}

		.message {
		  position: relative;
		  width: 80rpx;
		  height: 80rpx;
		  margin: 0 0 0 13rpx;
		}

		.message > image {
		  width: 80rpx;
		  height: 80rpx;
		}

		.message .dot {
		  position: absolute;
		  top: 10rpx;
		  right: 10rpx;
		  width: 12rpx;
		  height: 12rpx;
		  background: #ffab32;
		  border: 1px solid #ffffff;
		  border-radius: 50%;
		}

		.set {
			margin-left: 50rpx;
		  display: flex;
		  align-items: center;
		}

		.set > image {
		  width: 48rpx;
		  height: 46rpx;
		  margin-right: 30rpx;
		}

		.personInfo {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx 0 30rpx;
			margin-top: 50rpx;
			align-items: center;

			.avatar {
				border: 6rpx solid white;
				border-radius: 50%;
				overflow: hidden;
				width: 142rpx;
				height: 142rpx;
				box-sizing: border-box;
			}

			.arrow {
				image {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.center {
				margin-right: 100rpx;

				.top {
					margin-top: 12rpx;
					display: flex;
					align-items: left;
					text-align: left;
					.name {
							white-space: nowrap;
						// margin-left: 100rpx;
							text-align: left;
							font-size: 35rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 330rpx;
							// font-size: 40rpx;
							line-height: 26px;
							color: #1A1917;
							background-color: transparent;
							margin-left: 50rpx;
							font-weight: 900;
					}
				
				}
				.topVip {
					image {
						margin-top: 10rpx;
						margin-left: 40rpx;
						width: 100rpx;
						height: 54rpx;
					}
				}
			}
		}

		

		.vip {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(to right, #232a44, #494f67);
			width: 100%;
			height: 102rpx;
			margin-top: 52rpx;
			padding: 0 18rpx 0 24rpx;
			border-radius: 24rpx;

			.left {
				display: flex;
				align-items: center;

				text {
					margin: 0 24rpx;
					color: #8591b4;
				}

				.textLeft {
					color: #8591b4;
				}
			}

			.right {
				width: 196rpx;
				height: 60rpx;
				background: #242b45;
				border-radius: 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 18rpx 0 26rpx;
				box-sizing: border-box;

				.textRight {
					font-size: 24rpx;
					color: #fff8ec;
				}
			}

			.imageLeft {
				width: 126rpx;
				height: 36rpx;
			}

			.imageRight {
				width: 42rpx;
				height: 42rpx;
			}
		}
		
		.pice {
			// margin-top: 38rpx;
			border-radius: 20rpx;
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 26rpx;
			padding: 0 18rpx;
			background: linear-gradient(to right, #69c1ff, #44a3ff);
			color: #ffffff;

			.txt {
				font-size: 34rpx;
				color: rgb(255, 215, 85);
				display: inline-block;
				font-weight: bold;
			}
		}
	}
	.info_vip{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		.info_vip_block{
			width: 150rpx;
			height: 100rpx;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}
		.texts {
			width: 150rpx;
			height: 50rpx;
			font-size: 35rpx;
			font-weight: 700;
			text-align: center;
		}
		.source {
			margin-top: 74rpx;
			margin-bottom: 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.left,
			.right {
				padding: 0 30rpx 0 26rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 138rpx;
				width: 328rpx;
				box-shadow: 0px 14px 38px 0px #bfdaff;
				border-radius: 24px;
		
				.text {
					font-size: 32rpx;
					color: white;
				}
		
				image {
					width: 80rpx;
					height: 78rpx;
				}
			}
		
			.left {
				margin-right: 16rpx;
				background: linear-gradient(to right, rgb(130, 152, 252), rgb(166, 205, 251));
			}
		
			.right {
				background: linear-gradient(to right, rgb(32, 205, 169), rgb(136, 227, 213));
			}
		}
		
		.isShowVip {
			margin-top: 50rpx;
		}
	}
	.noPice {
		height: 624rpx;
	}

	.hasVip {
		height: 736rpx;
	}

	.all {
		height: 862rpx;
	}

	// list 内容
	.content {
		padding: 0 40rpx;
		margin-top: 38rpx;

		.item {
			height: 260rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 0.6);
			margin-bottom: 20rpx;
			padding: 36rpx 36rpx 48rpx 40rpx;
			box-sizing: border-box;

			.title {
				color: #1a1a1a;
				font-size: 32rpx;
				font-weight: bold;
			}

			.box {
				margin-top: 57rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				& > view {
					text-align: center;
					width: 128rpx;
					height: 114rpx;

					.son {
						margin-top: 16rpx;
						font-size: 24rpx;
					}
				}

				image {
					width: 48rpx;
					height: 44rpx;
				}
			}
		}
	}
}
</style>
